<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>蜗牛宠物领养平台</title>
    <link rel="shortcut icon" th:href="@{/asserts/images/favicon.ico}" type="image/x-icon"/>
    <!-- Bootstrap的css -->
    <link rel="stylesheet" th:href="@{/asserts/bootstrap3.4.1/css/bootstrap.min.css}">
    <!-- jQuery本地-->
    <script th:src="@{/asserts/js/jQuery-3.6.0.js}"></script>
    <!-- 加载本地js -->
    <script th:src="@{/asserts/bootstrap3.4.1/js/bootstrap.min.js}"></script>
    <!-- 加载common.css -->
    <link rel="stylesheet" th:href="@{/asserts/css/common.css}" />

    <!-- 引入验证插件-->
    <link rel="stylesheet" th:href="@{/asserts/validator/css/bootstrapValidator.css}"/>
    <script th:src="@{/asserts/validator/js/bootstrapValidator.js}"></script>

    <!-- 本页面css -->
    <link rel="stylesheet" th:href="@{/asserts/css/login.css}" />
    <!-- 本页面js -->
    <script th:src="@{/asserts/js/login.js}"></script>
</head>
<style>
    .form-control {
        border-radius: 0;
    }
</style>

<body>
<!-- header -->
<div class="w">
    <div class="header">
        <span><a th:href="@{/index.html}">返回首页</a></span>
    </div>
</div>


<!-- content -->
<div class="login-wrap">
    <div class="w">
        <div class="content">

            <div class="login-form fr">

                <div class="login-box h50">
                    <div class="login-way login fl active" onclick="changeForm(1)">账户登录</div>
                    <div class="login-way register fr" onclick="changeForm(2)">注册账号</div>
                </div>

                <!-- ===================== 登录的表单 ========================-->
                <form id="login" class="show-form form-horizontal" th:action="@{/user/login}" method="post">
                    <div class="pl20 pr20">
                        <div class="h50"></div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">
                                <i class="iconfont">&#xe604;</i>
                            </label>
                            <div class="col-lg-9">
                                <input type="text" class="form-control itxt" name="username" placeholder="用户账号"
                                       autocomplete="off"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-3 control-label">
                                <i class="iconfont">&#xe625;</i>
                            </label>
                            <div class="col-lg-9">
                                <input type="password" class="form-control itxt" name="password" placeholder="用户密码"
                                       autocomplete="off"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-3 control-label">
                                <span class="glyphicon glyphicon-check" aria-hidden="true"></span>
                            </label>
                            <div class="col-lg-9 ">
                                <div class="col-xs-8 no-padding">
                                    <input type="text" class="form-control itxt" name="validatecode" placeholder="请输入验证码"
                                           autocomplete="off"/>
                                </div>
                                <div class="col-xs-4 no-padding">
                                    <a href="javascript:void(0)" onclick="changeCode()">
                                        <img class="pagecode" th:src="@{/user/kaptcha}"/>看不清，请换一张
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="wp">
                            <div class="h50 right-link">
                                <div class="fr fs10 pt15">
                                    <div class="checkbox">
                                        <label>
                                            <input name="checkAutoLogin" type="checkbox">自动登录
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="wp mt50">
                            <div class="h50 center">
                                <div class="login-btn">
                                    <button type="submit">登&nbsp;&nbsp;&nbsp;&nbsp;录</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

                <!-- =========================== 注册的表单 ======================== -->
                <form id="register" class="form form-horizontal" th:action="@{/user/register}" method="post">
                    <div class="pl20 pr20">
                        <div class="h34"></div>

                        <div class="form-group">
                            <label class="col-lg-3 control-label">
                                <i class="iconfont">&#xe604;</i>
                            </label>
                            <div class="col-lg-9">
                                <input type="text" class="form-control itxt" name="username"
                                       placeholder="新账号" autocomplete="off"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-3 control-label">
                                <i class="iconfont">&#xe625;</i>
                            </label>
                            <div class="col-lg-9">
                                <input type="text" class="form-control itxt" name="password"
                                       placeholder="新密码" autocomplete="off"/>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-3 control-label">
                                <i class="iconfont">&#xe625;</i>
                            </label>
                            <div class="col-lg-9">
                                <input type="text" class="form-control itxt" name="d_password"
                                       placeholder="重输密码" autocomplete="off"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-3 control-label">
                                <i class="glyphicon glyphicon-envelope"></i>
                            </label>
                            <div class="col-lg-9">
                                <input type="text" class="form-control itxt" name="email"
                                       placeholder="请输入邮箱地址" autocomplete="off"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-lg-4">
                                <input type="text" class="form-control itxt" name="code"
                                       placeholder="请输入验证码" autocomplete="off"/>
                            </div>
                            <div class="col-lg-8">
                                <div class="login-btn">
                                    <button type="button" id="emailBtn" onclick="sendEmail()">点击发送激活邮件</button>
                                </div>
                            </div>
                        </div>
                        <div class="wp mt50">
                            <div class="h50 center">
                                <div class="login-btn">
                                    <button type="submit">注&nbsp;&nbsp;&nbsp;&nbsp;册</button>
                                </div>
                            </div>
                        </div>

                    </div>
                </form>


            </div>
        </div>
    </div>
</div>
</body>
</html>